<template>
  <div class="pagination">
    {{startEndPage}}
    <button :disabled='pageNo==1' @click="$emit('currentPageNo',pageNo-1)">上一页</button>
    <button v-show="startEndPage.statNum>1"  @click="$emit('currentPageNo',1)" :class="{current:pageNo==1}">1</button>
    <button v-show="startEndPage.statNum>2">···</button>

    <button v-for="page in startEndPage.endNum" :key="page" v-show="page>=startEndPage.statNum"  @click="$emit('currentPageNo',page)" :class="{current:pageNo==page}">{{page}}</button>
    
    <button v-show="startEndPage.endNum<startEndPage.pageTotal-1">···</button>
    <button v-show="startEndPage.endNum<startEndPage.pageTotal"  @click="$emit('currentPageNo',startEndPage.pageTotal)">{{startEndPage.pageTotal}}</button>
    <button :disabled="pageNo==startEndPage.pageTotal"  @click="$emit('currentPageNo',pageNo+1)">下一页</button>
    
    <button style="margin-left: 30px">共 {{total}} 条</button>
  </div>
</template>

<script>
  export default {
    name: "Pagination",
    props:["total","pageSize",'pageNo',"continue"],
    computed:{
      startEndPage(){
        let pageTotal=Math.ceil(this.total/this.pageSize)
        let statNum=this.pageNo-parseInt(this.continue/2)
        let endNum =this.pageNo+parseInt(this.continue/2)
        if(this.continue>pageTotal){
          statNum=1
          endNum=pageTotal
        }else{
          if(statNum<1){
            statNum=1
            endNum=this.continue
          }
        }
         if(endNum>pageTotal){
            endNum=pageTotal
            statNum=pageTotal-this.continue+1
          }
        return {statNum,endNum,pageTotal}
      }
    }
  }
</script>

<style lang="less" scoped>
  .pagination {
    text-align: center;
    margin-bottom: 8px;
  .current{
    background-color: red;
  }
    button {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: #606266;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;

      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }

      &.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>